<template>
  <div class="right-item">
    <div class="right-item-top">
      <div>{{ title }}</div>
      <div>{{ subTitle }}</div>
    </div>
    <div class="right-item-content">
      <div v-if="!data || data.length === 0">
        <div class="item">-</div>
        <div class="item">-</div>
        <div class="item">-</div>
        <div class="item">-</div>
        <div class="item">-</div>
        <div class="item">-</div>
        <div class="item">-</div>
      </div>
      <div v-for="(item, index) in data" :key="index" class="item">
        <span v-if="item !== null">
          <span v-if="typeof item === 'string' && item.endsWith('%') && parseFloat(item) >= 100" style="color: green">{{
            item
          }}</span>
          <span v-if="typeof item === 'string' && item.endsWith('%') && parseFloat(item) < 100" style="color: red">{{
            item
          }}</span>
          <span v-if="typeof item === 'number'">{{ item }}</span>
        </span>
        <span v-else>-</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  subTitle: {
    type: String,
    default: ''
  },
  data: Array
})
</script>

<style scoped lang="less">
@import './common.less';
</style>
